<template>
	<div>
		<uni-section title="User Name" type="line" padding>
			<uni-easyinput v-model="userInfo.name" placeholder="Please input your user name here"></uni-easyinput>
		</uni-section>

		<uni-section title="Password" type="line" padding>
			<uni-easyinput type="password" v-model="userInfo.password" placeholder="Please input your password here">
			</uni-easyinput>
		</uni-section>

		<!-- 获取头像 -->
		<view class="bg-gray padding-top-sm">
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image>
			</button>
		</view>

		<button type="primary" plain="true" @click="requestLogin">Login</button>
		<button @click="getUserInfo" @tap="getUserInfo">请登录</button>

	</div>
</template>

<script lang="ts">
	import {
		login,
		wechatLogin
	} from "@/service/auth";
	import {
		getAllArticles
	} from "@/service/articles"

	function getBase64Image(img) {
		var canvas = document.createElement("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img, 0, 0, img.width, img.height);
		var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
		var dataURL = canvas.toDataURL("image/" + ext);
		return dataURL;
	}

	export default {
		data() {
			return {
				userInfo: {
					name: "admin",
					password: "123456",

				},
				avatarUrl: ""
			}
		},
		onLoad() {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: function(loginRes: {
					errMsg: string,
					code: string
				}) {
					console.log(loginRes);
					if (loginRes.code) {
						console.log("code", loginRes.code)

						wechatLogin(loginRes.code).then((resp) => {
							console.log(resp)
							getAllArticles().then((resp) => {
								console.log("articles", resp)
							})


						}).catch((err) => {
							console.error(err)
						})

					}

				}
			});
		},
		methods: {
			onChooseAvatar(e) {
				// console.log(e.detail);
				this.avatarUrl = e.detail.avatarUrl
				console.log(this.avatarUrl)
				uni.uploadFile({
							url: 'https://wechatapi.houzhanyi.com:8787/api/auth/upload', //仅为示例，非真实的接口地址
							filePath: this.avatarUrl,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
				// let img = new Image();
				// img.setAttribute('crossOrigin', 'anonymous');
				// //网络图片地址
				// img.src = this.avatarUrl;
				// img.onload = () => {
				// 	let getBase64Str = getBase64Image(img);
				// 	console.log('base64 str', getBase64Str)
				// }
			},
			async getUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						console.log('用户昵称为：' + infoRes);
					}
				});
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: res => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			async requestLogin() {
				const jwtToken = await login(this.userInfo.name, this.userInfo.password)
				console.log(jwtToken)
				// .then(() => {
				// 	console.log('login succeeded!')
				// })
			}
		}
	}
</script>

<style>
</style>
